<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, pet-scalable=0">

    <title>发布寻主信息</title>

    <link href="./AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="./AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="./css/personal.css" rel="stylesheet" type="text/css">
    <link href="./css/infstyle.css" rel="stylesheet" type="text/css">
    <script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="./AmazeUI-2.4.2/assets/js/amazeui.js"></script>

    <!--导入vue和axios-->
    <script type="text/javascript" src="./plugins/vue/dist/vue.min.js"></script>
    <script type="text/javascript" src="./plugins/axios/dist/axios.min.js"></script>
    <!--引入公共的js-->
    <script type="text/javascript" src="./js/common.js"></script>

    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=zPtEB5VWRUzkxuivK7XRlajkL183oiCC"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<div id="myDiv">
    <!--头 -->
    <header>
        <article>
            <div class="mt-logo">
                <!--顶部导航条 -->
                <div class="am-container header">
                    <ul class="message-l">
                        <div class="topMessage">
                            <div class="menu-hd">
                                <a href="#" target="_top" class="h">亲，请登录</a>
                                <a href="#" target="_top">免费注册</a>
                            </div>
                        </div>
                    </ul>
                    <ul class="message-r">
                        <div class="topMessage home">
                            <div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
                        </div>
                        <div class="topMessage my-shangcheng">
                            <div class="menu-hd MyShangcheng"><a href="#" target="_top"><i
                                    class="am-icon-pet am-icon-fw"></i>个人中心</a></div>
                        </div>
                        <div class="topMessage mini-cart">
                            <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                                    class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
                                    id="J_MiniCartNum" class="h">0</strong></a></div>
                        </div>
                        <div class="topMessage favorite">
                            <div class="menu-hd"><a href="#" target="_top"><i
                                    class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
                        </div>
                    </ul>
                </div>
                <!--悬浮搜索框-->

                <div class="nav white">
                    <div class="logoBig">
                        <li><img src="./images/logobig.png"/></li>
                    </div>

                    <div class="search-bar pr">
                        <a name="index_none_header_sysc" href="#"></a>
                        <form>
                            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                                   autocomplete="off">
                            <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
                        </form>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </article>
    </header>
    <div class="nav-table">
        <div class="long-title"><span class="all-goods">全部分类</span></div>
        <div class="nav-cont">
            <ul>
                <li class="index"><a href="#">首页</a></li>
                <li class="qc"><a href="#">闪购</a></li>
                <li class="qc"><a href="#">限时抢</a></li>
                <li class="qc"><a href="#">团购</a></li>
                <li class="qc last"><a href="#">大包装</a></li>
            </ul>
            <div class="nav-extra">
                <i class="am-icon-pet-secret am-icon-md nav-pet"></i><b></b>我的福利
                <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
            </div>
        </div>
    </div>
    <b class="line"></b>
    <div class="center" id="app">
        <div class="col-main">
            <div class="main-wrap">

                <div class="pet-info">
                    <!--个人信息 -->
                    <div class="info-main">
                        <form class="am-form am-form-horizontal" v-model="searchMasterMsg">
                            <div class="am-form-group">
                                <label for="pet-title" class="am-form-label">标题</label>
                                <div class="am-form-content">
                                    <input type="text" v-model="searchMasterMsg.title" id="pet-title" placeholder="title">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="pet-name" class="am-form-label">昵称</label>
                                <div class="am-form-content">
                                    <input type="text" v-model="searchMasterMsg.name" id="pet-name" placeholder="name">

                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-form-label">性别</label>
                                <div class="am-form-content sex">
                                    <label class="am-radio-inline">
                                        <input checked="checked" v-model="searchMasterMsg.gender" type="radio" name="radio10"
                                               value="1" data-am-ucheck> 公
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" v-model="searchMasterMsg.gender" name="radio10" value="0"
                                               data-am-ucheck> 母
                                    </label>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="pet-age" class="am-form-label">年龄</label>
                                <div class="am-form-content">
                                    <input type="text" v-model="searchMasterMsg.age" id="pet-age" placeholder="age">
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="pet-price" class="am-form-label">价格</label>
                                <div class="am-form-content">
                                    <input type="text" v-model="searchMasterMsg.price" id="pet-price" placeholder="price">
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="pet-coat_color" class="am-form-label">毛色</label>
                                <div class="am-form-content">
                                    <input type="text" v-model="searchMasterMsg.coatColor" id="pet-coat_color"
                                           placeholder="coat_color">
                                </div>
                            </div>


                            <div class="am-form-group">
                                <label for="pet-type" class="am-form-label">品种</label>
                                <div class="am-form-content">
                                    <input type="text" v-model="searchMasterMsg.petType" id="pet-type" placeholder="type">
                                </div>
                            </div>
                            <!--private String resources;-->
                            <div class="am-form-group am-form-file">
                                <label class="am-form-label">图片</label>
                                <div class="am-form-content">
                                    <el-upload
                                            class="upload-demo"
                                            action="http://localhost:80/fastDfs"
                                            :on-preview="handlePreview"
                                            :on-remove="handleRemove"
                                            :on-success="handleSuccess"
                                            :file-list="fileList"
                                            list-type="picture">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </div>
                            </div>
                            <!--<el-form-item prop="resources" label="图片上传">
                                <el-upload
                                        class="upload-demo"
                                        action="/api/fastDfs"
                                        :on-preview="handlePreview"
                                        :on-remove="handleRemove"
                                        :on-success="handleSuccess"
                                        :file-list="fileList"
                                        list-type="picture">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>-->
                            <!--private String address;-->
                            <div class="am-form-group">
                                <label  class="am-form-label">地址</label>
                                <div class="am-form-content">
                                    <input type="text" id="suggestId" v-model="searchMasterMsg.address" placeholder="请输入地址">
                                </div>
                            </div>

                            <div class="info-btn">
                                <div class="am-btn am-btn-danger" @click="publish">保存修改</div>
                            </div>

                        </form>
                    </div>

                </div>

            </div>
            <!--底部-->
            <div class="footer">
                <div class="footer-hd">
                    <p>
                        <a href="#">恒望科技</a>
                        <b>|</b>
                        <a href="#">商城首页</a>
                        <b>|</b>
                        <a href="#">支付宝</a>
                        <b>|</b>
                        <a href="#">物流</a>
                    </p>
                </div>
                <div class="footer-bd">
                    <p>
                        <a href="#">关于恒望</a>
                        <a href="#">合作伙伴</a>
                        <a href="#">联系我们</a>
                        <a href="#">网站地图</a>
                        <em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank"
                                                                   title="模板之家">模板之家</a> - Collect from <a
                                href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input" : "suggestId"
        });
    /*ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件

        let value = "";
        if (e.toitem.index > -1) {
            let _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        //console.debug("value",value);
        //vue.searchMasterMsg.address = value;
    });*/
    //鼠标选中的时候触发事件
    ac.addEventListener("onconfirm", function (e) {
        let  _value =  e.item.value;
        let value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        console.debug("value",value);
        vue.searchMasterMsg.address = value;
    });


    let vue = new Vue({
        el:"#app",
        data:{
            // 上传的图片列表
            fileList:[],
            searchMasterMsg: {
                title: '',
                name: '',
                price: 0,
                age: 0,
                gender: 1,
                coatColor: '',
                resources: '',
                petType: null,
                address: '',
            }

        },
        methods:{
            publish(){
                console.debug(this.searchMasterMsg);
                // 为了后端方便取值，创建petType对象，前端输入宠物种类的id，后续这个地方改成下拉菜单，目前先输入id
                let petType = {"id":this.searchMasterMsg.petType};
                //添加宠物类型对象
                this.searchMasterMsg.petType = petType;

                this.$http.post("/searchMasterMsg/publish", this.searchMasterMsg).then(res => {
                        //发布成功后就跳转到主页
                        res = res.data;
                        console.debug(res);
                        if (res.success) {
                            alert("发布成功！");
                            location.href = "/index.html"
                        } else {
                            alert(res.message);
                        }
                    });
            },
            //图片相关的三个方法
            handleSuccess(response, file, fileList){
                console.log("===========")
                console.log("response",response);
                console.log("file",file);
                console.log("fileList",fileList);
                

                // 可能上传多张图片
                for(let i = 0; i < fileList.length; i++){
                    // 获取具体的file对象
                    let fileObj = fileList[i];
                    console.log("fileObj",fileObj);
                    // 判断如果有值，表示新增
                    if(fileObj.response){
                        // 新增是这样获取url地址的
                        let url = fileObj.response.resultObj;
                        if(i == 0){
                            this.searchMasterMsg.resources = url;
                        } else {
                            this.searchMasterMsg.resources = this.searchMasterMsg.resources+","+url;
                        }
                    } else {
                        // 这里就是编辑了，回显的url是带有ip地址的，直接获取url就可以
                        console.log("fileObj.url",fileObj.url);
                        // 获得带有ip的url地址
                        let url = fileObj.url;
                        // 我们不需要ip，所以需要进行切割
                        if(i == 0){
                            // http://81.70.161.93:8888/group1/M00/00/00/rBUACGIIgACABhp4AAH3HBuvw60706.jpg
                            // 通过截取ip地址ide长度获取后面的值
                            this.searchMasterMsg.resources = url.substring(this.dfsUrl.length);
                        } else {
                            this.searchMasterMsg.resources = this.searchMasterMsg.resources+","+url.substring(this.dfsUrl.length);
                        }
                    }
                }
                console.log("this.searchMasterMsg.resources",this.searchMasterMsg.resources);
            },
            handleRemove(file, fileList) {
                // 删除也是一样的操作，判断是否有 response
                let url = "";
                if(file.response){
                    // 新增的话是通过response来获取值
                    url = file.response.resultObj;
                } else {
                    // 修改的话是通过url来获取值
                    url = file.url.substring(this.dfsUrl.length);

                }

                // 先通过file把其作为参数传递到后台进行删除，然后再重新设置resources的值
                //let param = {"url" : url};
                console.log("删除请求的参数param",url);
                // 请求服务器删除文件图片数据
                this.$http.delete("/fastDfs/?path="+url).then(res=>{
                    // 如果删除成功
                    if(res.data.success){
                        // 如果没有图片，则给资源设置路径为空
                        if(fileList.length == 0){
                            this.searchMasterMsg.resources = "";
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            });
                        }
                        // 否则循环路径，拼接resources的值
                        for(let i = 0; i < fileList.length; i++){
                            // 获取具体的file对象
                            let fileObj = fileList[i];
                            if(fileObj.response){
                                // 如果有值，表示是新增的
                                // 单张图片的url
                                let url = fileObj.response.resultObj;
                                if(i == 0){
                                    this.searchMasterMsg.resources = url;
                                } else {
                                    this.searchMasterMsg.resources = this.searchMasterMsg.resources+","+url;
                                }
                            } else {
                                // 单张图片的url
                                let url = fileObj.url;
                                if(i == 0){
                                    this.searchMasterMsg.resources = url.substring(this.dfsUrl.length);
                                } else {
                                    this.searchMasterMsg.resources = this.searchMasterMsg.resources+","+url.substring(this.dfsUrl.length);
                                }
                            }

                        }
                    }else {
                        this.$message({
                            message: '删除失败!',
                            type: 'error'
                        });
                    }
                })
            },
            handlePreview(file) {
                console.log(file);
            },
        }
    });

</script>
</body>

</html>